<template>
  <view class="form-content">
    <u-form
      :model="form"
      ref="refForm"
      label-position="top"
      :error-type="['toast']"
    >
      <u-form-item label="治疗领域" prop="therapeuticTypeId" :required="true">
        <view class="white-bg">
          <u-input
            v-model="form.therapeuticType"
            type="select"
            @click="showSelect('therapeuticTypeId')"
          />
        </view>
      </u-form-item>
      <u-form-item
        label="子治疗领域"
        prop="subTherapeuticType"
        :required="true"
      >
        <view class="white-bg">
          <u-input v-model="form.subTherapeuticType" />
        </view>
      </u-form-item>
    </u-form>
  </view>
  <!--编辑选择型字段-->
  <editSelectFeildVue
    ref="refEditSelectFeildVue"
    :info="form"
    @submit="submit"
  />
</template>
<script lang="ts" setup>
import { regExpLiteral } from '@babel/types';
import editSelectFeildVue from '../editSelectFeild.vue';
import { getDictdata } from '@/api/modules/user';
import { onReady } from '@dcloudio/uni-app';
import { getEchoValue, getValueIndex } from '../../index';

const props = withDefaults(
  defineProps<{
    form: any;
  }>(),
  {
    form: {
      subTherapeuticType: '',
      therapeuticTypeId: '',
    },
  }
);

const form = ref<any>({});

watch(
  () => props.form,
  (nVal) => {
    form.value = nVal;
  },
  {
    deep: true,
  }
);

const refForm = ref();
const seleceList = ref<any>({});
const rules = {
  subTherapeuticType: [
    {
      required: true,
      message: '请输入子治疗领域',
      trigger: 'blur,change',
    },
  ],
  therapeuticTypeId: [
    {
      required: true,
      message: '请选择治疗领域',
      trigger: 'change',
    },
  ],
};

const submit = (data: any) => {
  if (data.therapeuticTypeId) {
    data.therapeuticType = getEchoValue(
      form.value.therapeuticTypeId,
      seleceList.value.therapeuticTypeId,
      'radio',
      {
        value: 'dictDataId',
        label: 'name',
      }
    );
  }
  form.value = data;
  console.log(data);
};
const getData = () => {
  return new Promise((resolve, reject) => {
    refForm.value.validate((valid: boolean) => {
      if (valid) {
        return resolve(form.value);
      } else {
        return reject(false);
      }
    });
  });
};

const refEditSelectFeildVue = ref();
const showSelect = (feild: string) => {
  const props = { value: 'dictDataId', label: 'name' };
  let defaultValue = [];
  if (form.value[feild]) {
    defaultValue = seleceList.value[feild].findIndex(
      (el: any) => el.dictDataId === form.value[feild]
    );
  }
  refEditSelectFeildVue.value.showSelect(
    seleceList.value[feild],
    feild,
    'select',
    defaultValue,
    props
  );
};

onMounted(() => {
  seleceList.value.therapeuticTypeId = [];
  getDictdata({ flag: 'TREATMENT_AREA_TYPE' })
    .then((res: any) => {
      seleceList.value.therapeuticTypeId = res.TREATMENT_AREA_TYPE;
    })
    .catch(() => {});
});

onReady(() => {
  refForm.value.setRules(rules);
});

defineExpose({
  getData,
});
</script>
<style lang="scss">
.form-content {
  padding: 32rpx;
  .white-bg {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 20rpx;
  }
}
</style>
